<template>
  <div class="basic-box">
    <el-form
      :model="basicForm"
      :rules="basicRules"
      ref="basicForm"
      size="small"
      label-position="right"
      label-width="130px"
    >
      <div class="basic-box-title">{{ basicTitleData.basicTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商户类型:" prop="userType">
            <el-select
              size="small"
              v-model="basicForm.userType"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in userTypeOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业类型:" prop="industryCode">
            <el-select
              size="small"
              @change="industryChange"
              v-model="basicForm.industryCode"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in industryCodeOptions"
                :key="item.industryCode"
                :label="item.industryName"
                :value="item.industryCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业类别:" prop="mccCd">
            <el-select
              size="small"
              v-model="basicForm.mccCd"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in mccCdOptions"
                :key="item.industryCode"
                :label="item.industryName"
                :value="item.industryCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="客户经理:" prop="accountManager">
            <el-select
              size="small"
              v-model="basicForm.accountManager"
              placeholder="请选择客户经理"
              clearable
            >
              <el-option
                v-for="item in accountManagerOptions"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="行业类型:" prop="mccList">
            <el-cascader
              ref="mcc"
              v-if="isShow"
              v-model="basicForm.mccList"
              :options="mccOptions"
              :props="mccProps"
              placeholder="请选择行业类型/MCC"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col> -->
      </el-row>
      <div
        class="basic-box-title basic-margin-top"
      >
        {{ basicTitleData.businessTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24" v-if="isImgShow && basicForm.userType != '3'">
          <el-form-item label="营业执照照片:" prop="licensePic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpRoaLicenseRequest"
              :limit="1"
              :file-list="roaLicenseFileList"
              :on-remove="roaLicenseRemove"
              :before-remove="beforeroaLicenseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="`${basicForm.userType!='3'?'营业执照':'商户'}全称:`" prop="businessLicence">
            <el-input
              type="text"
              v-model="basicForm.businessLicence"
              placeholder="请输入营业执照全称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户简称:" prop="userShortName">
            <el-input
              type="text"
              v-model="basicForm.userShortName"
              placeholder="请输入商户简称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType != '3'">
          <el-form-item label="社会信用代码:" prop="businessLicenceNo">
            <el-input
              type="text"
              v-model="basicForm.businessLicenceNo"
              placeholder="请输入社会信用代码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType != '3'">
          <el-form-item label="营业执照开始时间:" prop="businessLicenceSDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.businessLicenceSDate"
              placeholder="请输入营业执照开始时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="businessLicenceSDateChange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType != '3'">
          <el-form-item label="营业执照结束时间:" prop="businessLicenceEDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.businessLicenceEDate"
              placeholder="请输入营业执照结束时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="营业地址:" prop="contactsAddr">
            <el-input
              type="textarea"
              v-model="basicForm.contactsAddr"
              placeholder="请输入营业地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="basic-box-title basic-margin-top">
        {{ basicTitleData.personTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24" v-if="isImgShow">
          <el-form-item label="法人手持身份证:" prop="handHeld">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httphandHeldRequest"
              :limit="1"
              :file-list="handHeldList"
              :on-remove="handHeldRemove"
              :before-remove="beforehandHeldRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isImgShow">
          <el-form-item label="法人身份证人像面:" prop="cardFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardFrontRequest"
              :limit="1"
              :file-list="cardFrontList"
              :on-remove="cardFrontRemove"
              :before-remove="beforecardFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isImgShow">
          <el-form-item label="法人身份证国徽面:" prop="cardReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardReverseRequest"
              :limit="1"
              :file-list="cardReverseList"
              :on-remove="cardReverseRemove"
              :before-remove="beforecardReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人姓名:" prop="legalPersonName">
            <el-input
              v-model="basicForm.legalPersonName"
              placeholder="请输入法人姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人性别:" prop="crpGender">
            <el-select
              size="small"
              v-model="basicForm.crpGender"
              placeholder="请选择法人性别"
            >
              <el-option
                v-for="item in crpGenderOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人电话:" prop="legalPersonPhone">
            <el-input
              v-model="basicForm.legalPersonPhone"
              placeholder="请输入法人电话"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人职业:" prop="crpProfession">
            <el-select
              size="small"
              v-model="basicForm.crpProfession"
              filterable
              placeholder="请输入法人职业"
            >
              <el-option
                v-for="item in crpProfessionOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证号:" prop="legalPersonId">
            <el-input
              v-model="basicForm.legalPersonId"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证开始日期:" prop="legalPersonIdSdate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.legalPersonIdSdate"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证结束日期:" prop="legalPersonIdEdate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.legalPersonIdEdate"
              placeholder="请输入身份证结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人省市区:" prop="mercProvinceCityArea">
            <el-cascader
              v-if="isShow"
              v-model="basicForm.mercProvinceCityArea"
              :options="mercProvinceCityAreaOptions"
              :props="mercProvinceCityAreaProps"
              placeholder="请选择法人省市区"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="法人地址:" prop="crpAddr">
            <el-input
              type="textarea"
              v-model="basicForm.crpAddr"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="basic-box-title basic-margin-top">
        {{ basicTitleData.linkmanTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="联系人姓名:" prop="contactsName">
            <el-input
              type="text"
              v-model="basicForm.contactsName"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人电话:" prop="contactsPhone">
            <el-input
              type="tel"
              v-model="basicForm.contactsPhone"
              placeholder="请输入联系人电话"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人邮箱:" prop="contactsEmail">
            <el-input
              type="email"
              v-model="basicForm.contactsEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input
              type="textarea"
              v-model="basicForm.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { getMccIndustryList, getMccList, getAccountManagerList } from "@/api/rb-merchant/posinfo/pos_info";
import { getDictionary, getRegion } from "@/api/system/dict";
import { uploadPrivate, uploadOCRCard } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    basicForm: Object,
    isImgShow: { //是否显示 客服会话框 默认显示
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      basicTitleData: {
        basicTitle: "基本信息",
        personTitle: "法人信息",
        businessTitle: "营业信息",
        linkmanTitle: "联系人信息",
      },
      basicRules: {
        userType: [
          { required: true, message: "请输入商户类型", trigger: "blur" },
        ],
        industryCode: [
          { required: true, message: "请选择行业类型", trigger: "blur" },
        ],
        mccCd: [
          { required: true, message: "请选择行业MCC码", trigger: "blur" },
        ],
        // mccList: [
        //   { required: true, message: "请选择行业MCC码", trigger: "blur" },
        // ],
        userShortName: [
          { required: true, message: "请输入商户简称", trigger: "blur" },
        ],
        handHeld: [
          { required: true, message: "请输入法人手持身份证", trigger: "blur" },
        ],
        cardFront: [
          {
            required: true,
            message: "请输入法人身份证人像面",
            trigger: "blur",
          },
        ],
        cardReverse: [
          {
            required: true,
            message: "请输入法人身份证国徽面",
            trigger: "blur",
          },
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        crpGender: [
          { required: true, message: "请输入法人性别", trigger: "blur" },
        ],
        legalPersonPhone: [
          { required: true, message: "请输入法人电话", trigger: "blur" },
        ],
        crpProfession: [
          { required: true, message: "请输入法人职业", trigger: "blur" },
        ],
        legalPersonId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        legalPersonIdSdate: [
          {
            required: true,
            message: "请输入法人身份证开始日期",
            trigger: "blur",
          },
        ],
        legalPersonIdEdate: [
          {
            required: true,
            message: "请输入法人身份证结束日期",
            trigger: "blur",
          },
        ],
        mercProvinceCityArea: [
          { required: true, message: "请输入法人省市区", trigger: "blur" },
        ],
        crpAddr: [
          { required: true, message: "请输入法人地址", trigger: "blur" },
        ],
        licensePic: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" },
        ],
        businessLicence: [
          { required: true, message: "请输入营业执照全称", trigger: "blur" },
        ],
        businessLicenceNo: [
          { required: true, message: "请输入社会信用代码", trigger: "blur" },
        ],
        businessLicenceSDate: [
          {
            required: true,
            message: "请选择营业执照开始时间",
            trigger: "blur",
          },
        ],
        businessLicenceEDate: [
          {
            required: true,
            message: "请选择营业执照结束时间",
            trigger: "blur",
          },
        ],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactsPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        contactsEmail: [
          { required: true, message: "请输入联系人邮箱", trigger: "blur" },
        ],
        contactsAddr: [
          { required: true, message: "请输入营业地址", trigger: "blur" },
        ],
        // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      userTypeOptions: [],
      industryCodeOptions: [],
      mccCdOptions: [],
      mercProvinceCityAreaOptions: [],
      mercProvinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountManagerOptions: [], //客户经理列表
      crpGenderOptions: [],
      crpProfessionOptions: [],
      roaLicenseFileList: [],
      handHeldList: [],
      cardFrontList: [],
      cardReverseList: [],
      isShow: true,
    };
  },
  watch: {
    "basicForm.userType"(val) {
      if (val) {
        this.getMccIndustry(val)
      }
    },
    "basicForm.industryCode"(val) {
      if (val) {
        this.getMccChildren(val)
      }
    },
  },
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "user_income_type"}).then((res) => {
        this.userTypeOptions = res.data.data;
      });
      getDictionary({code: "crp_gender"}).then((res) => {
        this.crpGenderOptions = res.data.data;
      });
      getDictionary({code: "crp_profession"}).then((res) => {
        this.crpProfessionOptions = res.data.data;
      });
      getAccountManagerList({createUser: ""}).then((res) => {
        this.accountManagerOptions = res.data.data;
      });
    },
    // getMccIndustry(val) {
    //   let stop_level = 1;
    //   let list = [];
    //   getMccIndustryList(val).then(
    //     (res) => {
    //       list = res.data.data;
    //       list.map((ele) => {
    //         Object.assign(ele, {
    //           leaf: 0 >= stop_level,
    //         });
    //       });
    //       this.mccOptions = list;
    //     },
    //     (error) => {
    //       window.console.log(error);
    //     }
    //   );
    // },
    /* 行业类型 interface */
    getMccIndustry(userType) {
      getMccIndustryList(userType).then(
        (res) => {
          this.industryCodeOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 行业类别 interface */
    getMccChildren(industryCode) {
      getMccList("-1", "-1", industryCode).then(
        (res) => {
          this.mccCdOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 行业类型 change */
    industryChange(e) {
      if (e) {
        this.basicForm.mccCd = '';
      }
    },
    /* 营业执照开始时间 change */
    businessLicenceSDateChange() {
    // businessLicenceSDateChange(e) {
    //   let date = /\d{4}-\d{1,2}-\d{1,2}/g.exec(e)[0].replace(/-/g,'');
    //   console.log(date, 'datedatedate');
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 营业执照照片上传 */
    httpRoaLicenseRequest(option) {
      uploadOCRCard(option.file, "5").then((res) => {
        this.basicForm.licensePic = res.data.data.link;
        this.basicForm.businessLicence = res.data.data.companyName;
        this.basicForm.userShortName = res.data.data.companyName;
        this.basicForm.businessLicenceNo = res.data.data.creditCode;
        this.basicForm.contactsAddr = res.data.data.businessAddress;
        this.basicForm.businessLicenceSDate = res.data.data.validFromDate;
        this.basicForm.businessLicenceEDate = res.data.data.validToDate;
        this.$refs.basicForm.validateField("licensePic");
      });
    },
    /* 营业执照照片删除 */
    roaLicenseRemove(file, fileList) {
      this.roaLicenseFileList = fileList;
      this.basicForm.licensePic = "";
    },
    beforeroaLicenseRemove(){
      return this.$confirm(`确定移除营业执照照片？`);
    },
    /* 法人手持身份证上传 */
    httphandHeldRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.handHeld = res.data.data.name;
        this.$refs.basicForm.validateField("handHeld");
      });
    },
    /* 法人手持身份证删除 */
    handHeldRemove(file, fileList) {
      this.handHeldList = fileList;
      this.basicForm.handHeld = "";
    },
    beforehandHeldRemove() {
      return this.$confirm(`确定移除法人手持身份证照片？`);
    },
    /* 法人身份证人像面上传 */
    httpCardFrontRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.basicForm.cardFront = data.link;
        this.basicForm.legalPersonName = data.name;
        this.basicForm.legalPersonId = data.num;
        this.basicForm.crpGender = data.sex;
        this.basicForm.crpAddr = data.address;
        this.isShow = false;
        this.$nextTick(()=>{
          this.isShow = true;
          this.basicForm.mercProvinceCityArea = [data.mercProvCode, data.mercCityCode, data.mercAreaCode]
        })
        this.$refs.basicForm.validateField("cardFront");
      });
    },
    /* 法人身份证人像面删除 */
    cardFrontRemove(file, fileList) {
      this.cardFrontList = fileList;
      this.basicForm.cardFront = "";
    },
    beforecardFrontRemove() {
      return this.$confirm(`确定移除法人身份证人像面？`);
    },
    /* 法人身份证国徽面上传 */
    httpCardReverseRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.basicForm.cardReverse = res.data.data.link;
        this.basicForm.legalPersonIdSdate = res.data.data.startDate;
        this.basicForm.legalPersonIdEdate = res.data.data.endDate;
        this.$refs.basicForm.validateField("cardReverse");
      });
    },
    /* 法人身份证国徽面删除 */
    cardReverseRemove(file, fileList) {
      this.cardReverseList = fileList;
      this.basicForm.cardReverse = "";
    },
    beforecardReverseRemove() {
      return this.$confirm(`确定移除法人身份证国徽面照片？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  padding: 20px 40px 20px 0;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.basic-margin-top {
  margin-top: 40px;
}
</style>